<template>
    <div>
        <div v-if="messageInfo.senderId !== user.userInfo.id">
            <div class="messageItem left">
                <div class="avator">
                    <img :src="user.currentInfo.avatar" class="img" />
                </div>
                <div class="msgbox">
                    <div class="chatName">{{ user.currentInfo.nickname }}</div>
                    <div class="chatMsg">{{ props.messageInfo.message }}</div>
                </div>
            </div>
        </div>
        <div v-else>
            <div class="messageItem right">
                <div class="msgbox">
                    <div class="chatMsg">{{ props.messageInfo.message }}</div>
                </div>
                <div class="avator">
                    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.b49dbddffaa692d75988e0c5882dacca?rik=r6IIYs2muimY7A&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140529%2f1-140529145A4.jpg&ehk=Co9XURYRCjJXUTzFG0Mw6lD7olzDKceEgv3slEC8kvQ%3d&risl=&pid=ImgRaw&r=0"
                        mode="" class="img" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { userStore } from '@/store';

const user = userStore()
const  props=defineProps({
    messageInfo: {
        type: Object,
        default: {}
    }
})
</script>

<style lang='less' scoped>
.messageItem {
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    position: relative;
}

.left::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 0.375rem solid transparent;
    border-top: 0.375rem solid transparent;
    border-right: 0.375rem solid #fefefe;
    left: 2.7rem;
    top: 2.5rem;
}
.right::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 0.375rem solid transparent;
    border-top: 0.375rem solid transparent;
    border-left: 0.375rem solid #95eb6c;
    right: 2.75rem;
    top: 1.6rem;
}

.right .msgbox .chatMsg {
    max-width: 70%;
    background: #95eb6c;
    border-radius: 0.1875rem;
    padding: 0.5rem;
    line-height: 1.375rem;

}

.avator {
    display: flex;
    width: 3rem;
    height: 3rem;
    justify-content: center;
    align-items: center;
}

.avator .img {
    width: 2rem;
    height: 2rem;
    border-radius: 0.3125rem;
}

.chatName {
    color: rgb(178, 178, 178);
    margin-bottom: 0.375rem;
}

.chatMsg {
    max-width: 70%;
    height: auto;
    background: #fefefe;
    border-radius: 0.1875rem;
    padding: 0.5rem;
    line-height: 1.375rem;
    color: #1f1b1c;
    min-height: 1.375rem;
    min-width: 1rem;
    white-space:normal; 
    word-break:break-all;
    
    overflow:hidden;
}

.msgbox {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.left .msgbox {
    align-items: flex-start;
    justify-content: center;
}

.right .msgbox {
    align-items: flex-end;
    justify-content: center;
}</style>
